<template>
	<view class="content">
		<u-row>
			<u-col style="padding: 0;" span="12">
				<view class="contain-list">
					<u-row style="height: 100%;">
						<u-col span="12" text-align="center">
						<view class="head">
								针对非微信小程序平台，组件的根元素就是uni-appbutton组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。
						</view>
						</u-col>
						<u-col span="12" text-align="center">
							<view class="middle">
								<u-button type="success" size="medium" shape="circle" :ripple="true">成功按钮</u-button>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="contain-list">
					<u-row style="height: 100%;">
						<u-col span="12" text-align="center">
						<view class="head">
								针对非微信小程序平台，组件的根元素就是uni-appbutton组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。
						</view>
						</u-col>
						<u-col span="12" text-align="center">
							<view class="middle">
								<u-button type="success" size="medium" shape="circle" :ripple="true">成功按钮</u-button>
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="contain-list">
					<u-row style="height: 100%;">
						<u-col span="12" text-align="center">
						<view class="head">
								针对非微信小程序平台，组件的根元素就是uni-appbutton组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。
						</view>
						</u-col>
						<u-col span="12" text-align="center">
							<view class="middle">
								<u-button type="success" size="medium" shape="circle" :ripple="true">成功按钮</u-button>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>
		<u-row>
				<u-col span="2" text-align="center">
					<text style="margin-left: 10rpx;font-size: 40rpx;">打赏</text>
				</u-col>
				<u-col span="3" text-align="center">
					<u-input v-model="value" :type="type" placeholder="1" :border="border" input-align="center" :clearable="false"/>
				</u-col>
				<u-col span="3" text-align="center">
					<text style="color: red;margin-right: 10rpx;font-size: 40rpx;">元</text>
				</u-col>
				<u-col span="4" text-align="center">
					<u-button  shape="circle" size="medium" type="warning">下单</u-button>
				</u-col>
		</u-row>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				type: 'text',
				border: true,
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.contain-list{
	width: 100%;
	height: 370rpx;
	background: url(../../static/1.jpg);
	margin-bottom: 40rpx;
}
.top{
	margin-top: 210rpx;
}
.head{
	color: white;
	
}
.middle{
	
}
</style>
